<template>
  <div id="excel-import" class="jx-content" :class="{'isCreativeCourse':isCreativeCourse}">
    <div class="excel-content">
      <el-upload ref="upload" :on-success="handleAvatarSuccess" :on-error="uploadError" :before-upload="uploadProgress" class="upload-demo" :action="'/tes/course/' + $localstorage.getLocalStorage('setCourseId')+ '/businessType/1/question-repository/import-from-excel'" :on-preview="handlePreview" :on-remove="handleRemove" :on-change="handleChange" :show-file-list="false" :before-remove="beforeRemove" multiple :limit="1" :on-exceed="handleExceed" :auto-upload="false">
        <div @click="clearFiles" class="button-style">上传Excel</div>
        <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
      </el-upload>
      <a :href="'/tes/course/'+ $localstorage.getLocalStorage('setCourseId')+ '/businessType/1/question-repository/model'">Excel模板下载
        <i class="iconfont icon-tubiaozhizuo-"></i>
      </a>
    </div>
    <div class="upload-file" v-if="fileList.length">
      <div v-for="(item,index) in fileList" :key="index">
        <span>{{ item.name }}</span>
        <i @click="clearFilesUser" style="cursor:pointer;" class="iconfont icon-shanchu"></i>
      </div>
    </div>
    <div class="btn-group">
      <div class="button-style" @click="submitUpload">保 存</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //是否是创作课程页面下
      isCreativeCourse:true,
      fileList: []
    };
  },
  created() {
    //验证页面是不是创建课程的页面
    let currentPath = this.$router.history.current.path;
    if (currentPath.match("CreativeCourse")) {
      this.isCreativeCourse = true;
    } else {
      this.isCreativeCourse = false;
    }
    //CreativeCourse
    console.log(this.$router.history.current.path, 66666);
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.reGetChapter();
    },
    reGetChapter() {
      let self = this;
      self.$http
        .get(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/chapter/list/owner"
        )
        .then(response => {
          let res = response.data;
          if (res.code == "200") {
            self.$nextTick(() => {
              self.tableData = res.data;
            });
            //已经有章节,判断导航显示
            self.$parent.mark = false;
            self.$parent.chaperFlag = false;
          } else if (res.code == "404") {
            self.tableData = "";
            //暂无章节,判断导航显隐藏
            this.$parent.mark = true;
            this.$parent.chaperFlag = false;
          }
        })
        .catch(err => {
          self.$message.error(res.message);
        });
    },
    handleChange(file, fileList) {
      this.fileList = fileList;
      console.log(file, fileList);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning("只能上传一个文件");
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    submitUpload() {
      if(this.fileList.length === 0){
        this.$message.warning("请上传Excel文件");
      }
      this.$refs.upload.submit();
    },
    handleAvatarSuccess(res, file, fileList) {
      if (res.code === 200) {
        this.$message.success("文件上传成功");
        this.$router.push({ path: "ItemBankList" });
      } else {
        this.$message.error(res.message);
        this.clearFiles();
        //window.location.reload();
      }
    },
    //失败
    uploadError() {
      console.log(6666);
      this.$message.error(res.message);
    },
    //上传中
    uploadProgress() {
      console.log(123123);
      this.$message("文件上传中...");
    },
    clearFiles() {
      this.$refs.upload.clearFiles();
      this.fileList = "";
    },
    clearFilesUser() {
      this.$refs.upload.clearFiles();
      this.fileList = "";
      this.$message.success("删除成功");
    }
  }
};
</script>
<style lang="scss">
@import "../../../styles/layout/color_variables";
#excel-import.isCreativeCourse{
  margin: 20px auto 30px;
}
#excel-import {
  width: 1200px;
  margin: 0px auto 30px;
  padding: 180px 0 36px;
  text-align: center;
  .excel-content {
    display: flex;
    justify-content: center;
    .upload-demo {
      position: relative;
      .el-upload-list {
        position: absolute;
        left: 26px;
        top: 40px;
        li {
          text-align: left;
        }
      }
    }
    .button-style {
      margin-right: 10px;
    }
    a {
      vertical-align: middle;
    }
  }
  .upload-file {
    margin: 10px 0 0 0;
    .iconfont {
      font-size: 24px;
      vertical-align: sub;
      color: $blue;
      margin: 0 0 0 10px;
    }
  }
  .btn-group {
    text-align: center;
    margin: 195px 0 0;
  }
}
</style>
